<script setup lang="ts">

import {EChartsOption} from "echarts";

const loading = ref(false);

const rawData = [
  [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
  [20000, 20000, 20000, 20000, 20000, 20000, 20000, 20000],
];
const totalData = [] as any;
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left: '50',
  right: '0',
  top: '10',
  bottom: '50',
};
const series = [
  '玩家投入灵石数量',
  '平台投入灵石数量',
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '85%',
    label: {
      show: true,
      // formatter: (params) => Math.round(params.value * 1000) / 10 + '%',
      formatter: '{c}',
    },
    data: rawData[sid]
  };
}) as any;

const echartsOption = reactive<EChartsOption>({
  legend: {
    selectedMode: false,
    bottom: '0',
    left: '0',
    itemWidth:14,
  },
  grid,
  yAxis: {
    type: 'value',
    axisLabel: {
      margin: 30,
      fontSize: 12,
      formatter: (value) =>{ return value ? (value / 1000 + 'k') : '0'}
    },
    inverse: false,
    interval: 10000,
    min: 0,
    max: 30000
  },
  xAxis: {
    type: 'category',
    data: ['昆仑山', '蓬莱岛', '瀛洲山', '方丈山', '不周山', '青山丘', '崆峒山', '罗浮山'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
  },
  series
}) as EChartsOption
</script>

<template>
  <div class="ml-6 bg-white">
    <div class="text-[12px] mb-4 ml-4 mt-4 font-bold" >正在进行的游戏中玩家与平台投入的灵石数量</div>
    <div class="text-[20px] mb-4 ml-4" style="color: #165baa;">本局灵石投入的总数量：100,000</div>
    <div class="text-[12px] mb-4 ml-4 text-slate-500">第16888期</div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <Echart :height="400" :width="600" :options="echartsOption" />
      </el-skeleton>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>
